import React, { useState, useEffect } from 'react'
import { Cascader, Button } from "antd"
import { getArea } from "../../services/location"


export default class Cascard extends React.Component {
    state = {
        options: [],
        choose: []
    }
    constructor(props) {
        super(props)
        this.fetchArea()
    }

    fetchArea(){
        getArea().then(res => {
            const provinces = res.map(item => ({
                cid: item.id,
                value: item.simpleName,
                label: item.simpleName,
                isLeaf: false
            }))
            this.setState({
                options: provinces
            })
        })
    }

    render() {
        return (
            <div>
                <Cascader
                    onChange={newValue => {
                        this.props.onChange && this.props.onChange(newValue)
                        this.setState({
                            choose: newValue
                        })
                    }}
                    options={this.state.options}
                    loadData={selectOptions => {
                        const opt = selectOptions[selectOptions.length - 1]
                        const parentId = opt.cid
                        opt.loading = true
                        getArea(parentId).then(resp => {
                            opt.loading = false
                            opt.children = resp.map(it => ({
                                cid: it.id,
                                value: it.simpleName,
                                label: it.simpleName,
                                isLeaf: selectOptions.length === 2
                            }))
                            this.setState({
                                options: [...this.state.options]
                            })
                        })
                    }}
                />
                {/* <Button typ="primary" onClick={() => {
                console.log(choose);
            }}>获取</Button> */}
            </div>
        )
    }
}

